<script>
import AddProject from "@/views/aihuman/IntelligentInteraction/addProject/addProject.vue";

export default {
  name: "Service",
  components: {AddProject},
  data() {
    return {}
  },
  methods: {
    handleSave() {
      this.$emit('on-save')
    },
    newProject() {
      this.$refs.addJiaoHu.open({}, 'add')
    },
    customerHuman() {
      this.$emit('on-customer')
    }
  }
}
</script>

<template>
  <div>
    <div class="board-header">
      <div class="board-header__title">核心服务</div>
<!--      <el-button type="primary" plain size="small">开发者平台></el-button>-->
    </div>

    <div class="service-box">
      <div class="service-box__item jiaohu">
        <div class="service-box__title">智能交互 <br>数字人</div>
        <div class="service-box__btn">
          <el-button size="small" @click="newProject">快速创建</el-button>
        </div>
      </div>

      <div class="service-box__item">
        <div class="service-box__title">数字解说员</div>
        <div class="service-box__btn">
          <el-button size="small">敬请期待</el-button>
        </div>
      </div>



      <div class="service-box__item fenshen">
        <div class="service-box__title">数字分身 <br> 形象制作</div>
        <div class="service-box__btn">
          <el-button size="small">敬请期待</el-button>
        </div>
      </div>

      <div class="service-box__item dingzhi">
        <div class="service-box__title">定制数字人</div>
        <div class="service-box__btn">
          <el-button size="small" @click="customerHuman">去定制</el-button>
        </div>
      </div>

      <div class="service-box__item dingzhi-voice">
        <div class="service-box__title">声音定制</div>
        <div class="service-box__btn">
          <el-button size="small">敬请期待</el-button>
        </div>
      </div>
    </div>

    <add-project
      ref="addJiaoHu"
      title="快速创建"
      @save="handleSave"
    />
  </div>
</template>

<style scoped lang="scss">
.service-box {
  display: flex;
  align-items: center;
  //flex-wrap: wrap;

  &__item {
    background: url("~@/assets/aihuman/board/shuzijieshuo.png") no-repeat #fff;
    background-size: cover !important;
    height: 22vh;
    width: 20%;
    border-radius: 15px;
    //padding: 60% 100% 10% 30%;
    padding: 8vh 0 0 2vh;
    box-sizing: border-box;
    margin-right: 1%;
    margin-bottom: 32px;

    //@media screen and (max-width: 1920px) {
    //  width: 220px;
    //  height: 170px;
    //  padding: 60px 80px 0 20px;
    //  background-size: cover !important;
    //}

    &:last-child {
      margin-right: 0;
    }

    &:hover {
      box-shadow: 0 0 12px rgba(16, 29, 43, 0.2);
    }

    &.jiaohu {
      background: url("~@/assets/aihuman/board/zhinengjiaohu.png") no-repeat #fff;
    }

    &.fenshen {
      background: url("~@/assets/aihuman/board/shuzifenshen.png") no-repeat #fff;

    }

    &.dingzhi {
      background: url("~@/assets/aihuman/board/dingzhishuziren.png") no-repeat #fff;

    }

    &.dingzhi-voice {
      background: url("~@/assets/aihuman/board/shengyindingzhi.png") no-repeat #fff;
    }
  }

  &__btn {
    //padding: 20px 0;
    margin-top: 10px;

    @media screen and (max-width: 1920px) {
      margin-top: 10px;
    }

    /deep/ .el-button {
      border: none;
      height: 40px;
      width: 100px;
      border-radius: 10px;

      @media screen and (max-width: 1920px) {
        border: none;
        height: 30px;
        width: 80px;
        font-size: 12px;
        border-radius: 8px;
      }

      &:hover {
        background: #0e5ef7;
        color: #fff;
      }
    }
  }

  &__title {
    font-size: 18px;
    height: 40px;

    @media screen and (max-width: 1920px) {
      font-size: 14px;
      height: 40px;
    }
  }
}

.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  &__title {
    font-weight: normal;
    font-size: 18px;
  }

  /deep/ .el-button {
    background: #fff;

    &:hover {
      background: #0e5ef7;
      color: #fff;
    }
  }
}
</style>
